{template 'header'}
<style type="text/css">
.chapter-loader .sk-fading-circle {
    width:40px;
    height:40px;
    position:relative;
}
.chapter-loader .sk-fading-circle .sk-circle {
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
}
.chapter-loader .sk-fading-circle .sk-circle:before {
    content:'';
    display:block;
    margin:0 auto;
    width:15%;
    height:15%;
    background-color:#fff;
    border-radius:100%;
    -webkit-animation:sk-circleFadeDelay 1.2s infinite ease-in-out both;
    -webkit-animation:sk-circleFadeDelay 1.2s infinite ease-in-out both;
    animation:sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.chapter-loader .sk-fading-circle .sk-circle2 {
    -webkit-transform:rotate(30deg);
    -webkit-transform:rotate(30deg);
    -ms-transform:rotate(30deg);
    transform:rotate(30deg);
}
.chapter-loader .sk-fading-circle .sk-circle3 {
    -webkit-transform:rotate(60deg);
    -webkit-transform:rotate(60deg);
    -ms-transform:rotate(60deg);
    transform:rotate(60deg);
}
.chapter-loader .sk-fading-circle .sk-circle4 {
    -webkit-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
}
.chapter-loader .sk-fading-circle .sk-circle5 {
    -webkit-transform:rotate(120deg);
    -webkit-transform:rotate(120deg);
    -ms-transform:rotate(120deg);
    transform:rotate(120deg);
}
.chapter-loader .sk-fading-circle .sk-circle6 {
    -webkit-transform:rotate(150deg);
    -webkit-transform:rotate(150deg);
    -ms-transform:rotate(150deg);
    transform:rotate(150deg);
}
.chapter-loader .sk-fading-circle .sk-circle7 {
    -webkit-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    transform:rotate(180deg);
}
.chapter-loader .sk-fading-circle .sk-circle8 {
    -webkit-transform:rotate(210deg);
    -webkit-transform:rotate(210deg);
    -ms-transform:rotate(210deg);
    transform:rotate(210deg);
}
.chapter-loader .sk-fading-circle .sk-circle9 {
    -webkit-transform:rotate(240deg);
    -webkit-transform:rotate(240deg);
    -ms-transform:rotate(240deg);
    transform:rotate(240deg);
}
.chapter-loader .sk-fading-circle .sk-circle10 {
    -webkit-transform:rotate(270deg);
    -webkit-transform:rotate(270deg);
    -ms-transform:rotate(270deg);
    transform:rotate(270deg);
}
.chapter-loader .sk-fading-circle .sk-circle11 {
    -webkit-transform:rotate(300deg);
    -webkit-transform:rotate(300deg);
    -ms-transform:rotate(300deg);
    transform:rotate(300deg);
}
.chapter-loader .sk-fading-circle .sk-circle12 {
    -webkit-transform:rotate(330deg);
    -webkit-transform:rotate(330deg);
    -ms-transform:rotate(330deg);
    transform:rotate(330deg);
}
.chapter-loader .sk-fading-circle .sk-circle2:before {
    -webkit-animation-delay:-1.1s;
    -webkit-animation-delay:-1.1s;
    animation-delay:-1.1s;
}
.chapter-loader .sk-fading-circle .sk-circle3:before {
    -webkit-animation-delay:-1s;
    -webkit-animation-delay:-1s;
    animation-delay:-1s;
}
.chapter-loader .sk-fading-circle .sk-circle4:before {
    -webkit-animation-delay:-0.9s;
    -webkit-animation-delay:-0.9s;
    animation-delay:-0.9s;
}
.chapter-loader .sk-fading-circle .sk-circle5:before {
    -webkit-animation-delay:-0.8s;
    -webkit-animation-delay:-0.8s;
    animation-delay:-0.8s;
}
.chapter-loader .sk-fading-circle .sk-circle6:before {
    -webkit-animation-delay:-0.7s;
    -webkit-animation-delay:-0.7s;
    animation-delay:-0.7s;
}
.chapter-loader .sk-fading-circle .sk-circle7:before {
    -webkit-animation-delay:-0.6s;
    -webkit-animation-delay:-0.6s;
    animation-delay:-0.6s;
}
.chapter-loader .sk-fading-circle .sk-circle8:before {
    -webkit-animation-delay:-0.5s;
    -webkit-animation-delay:-0.5s;
    animation-delay:-0.5s;
}
.chapter-loader .sk-fading-circle .sk-circle9:before {
    -webkit-animation-delay:-0.4s;
    -webkit-animation-delay:-0.4s;
    animation-delay:-0.4s;
}
.chapter-loader .sk-fading-circle .sk-circle10:before {
    -webkit-animation-delay:-0.3s;
    -webkit-animation-delay:-0.3s;
    animation-delay:-0.3s;
}
.chapter-loader .sk-fading-circle .sk-circle11:before {
    -webkit-animation-delay:-0.2s;
    -webkit-animation-delay:-0.2s;
    animation-delay:-0.2s;
}
.chapter-loader .sk-fading-circle .sk-circle12:before {
    -webkit-animation-delay:-0.1s;
    -webkit-animation-delay:-0.1s;
    animation-delay:-0.1s;
}
@-webkit-keyframes sk-circleFadeDelay {
    0%, 39%, 100% {
        opacity:0;
    }
    40% {
        opacity:1;
    }
}
@keyframes sk-circleFadeDelay {
    0%, 39%, 100% {
        opacity:0;
    }
    40% {
        opacity:1;
    }
}
.g-audio-bar .loader {
    width:20px;
    position:absolute;
    left:16px;
    margin:0;
    top:15px;
}
.g-audio-bar .loader .sk-fading-circle {
    width:20px;
    height:20px;
}
</style>
    <div style="padding-bottom: 66px;">
        <div class="">
            <div class="desc g-bg-white g-margin-b" style="padding: 18px 16px;">
                <div id="des-info" class="title g-font-16 g-text-cut" style="width: 80%;"><b id="book-des"></b>
                </div><pre class="content g-font-16" style="overflow: hidden; margin-top: 0px; height: 0px; color: rgb(74, 74, 74); letter-spacing: 1px; line-height: 23px;"></pre>
                <div class="" onclick="showDes(this)" style="display: inherit;">
                    <div class="switch" style="position: absolute; right: 11px; top: 18px; color: rgb(106, 127, 165);">展开详情</div>
                </div>
            </div>
        </div>
        <div class="g-rlt g-bg-white">
            <div class="textarea-wrap g-bg-white g-rlt">
                <textarea oninput="$('#curnum').html($(this).val().length)" id="content-val" maxlength="120" placeholder="请输入学习笔记..." style="width: 100%; padding: 21px 16px; height: 265px; border: none; outline: none; font-size: 16px; color: rgb(74, 74, 74); letter-spacing: 1px;"></textarea><span style="display: inline-block; color: rgb(155, 155, 155); font-size: 14px; position: absolute; bottom: 20px; right: 11px;"><font id='curnum'>0</font>/120字</span>
            </div>
            <div style="margin-bottom: 8px;"></div>
            <div class="" style="display:none;">
                <div class="record g-flex col-center g-bg-white g-push" style="padding: 20px 16px; border-top: 1px solid rgb(238, 238, 238);">
                    <div class="icon" style="margin-right: 9px;">
                        <img src="{RES}img/voice.png" alt="" style="width: 27px;">
                    </div>
                    <p style="color: rgb(155, 155, 155);">点击一下开始录音</p>
                </div>
            </div>
        </div>
        <div class="fix-bottom g-bg-white" style="position: fixed; bottom: 0px; width: 100%; height: 56px; left: 0px; max-width: 480px; right: 0px; margin: auto;">
            <button onclick="goSub()" class="g-button" style="text-align: center; width: 80%; bottom: 68px; left: 0px; right: 0px; margin: 6px auto auto; max-width: 400px;">发表学习笔记</button>
        </div>
        <div class="record-panel g-text-center" style="padding-top: 12px; position: fixed; height: 206px; bottom: -210px; left: 0px; width: 100%; background: rgb(255, 255, 255); transition: all 0.3s; box-shadow: rgb(240, 240, 240) 0px -1px 4px 1px;">
            <div style="color: rgb(155, 155, 155); margin-bottom: 10px;">点击录音结束</div>
            <div class="g-rlt g-margin-b" style="height: 70px;">
                <div class="g-center-abs anm-zoom-out-alway" style="width: 66px; height: 66px; background: rgba(254, 146, 110, 0.5); border-radius: 100%;"></div>
                <div class="g-center-abs" style="width: 52px; height: 52px; background: -webkit-linear-gradient(90deg, rgb(254, 146, 110) 0%, rgb(254, 107, 105) 100%); border-radius: 100%; top: 7px;"></div>
                <div class="g-center-abs" style="width: 18px; height: 18px; background: rgb(255, 255, 255); border-radius: 4px; top: 24px;"></div>
            </div>
            <p style="color: rgb(155, 155, 155);"><span style="color: rgb(254, 107, 105);">00:00</span> / 20:00</p>
            <div class="footer g-font-18 g-center-abs g-push" style="color: rgb(153, 153, 153); bottom: 0px; height: 55px; line-height: 55px; border-top: 1px solid rgb(238, 238, 238);">取消</div>
        </div>
        <div class="g-modal  g-hidden">
            <div class="g-mask"></div>
            <div class="dialog">
                <div class="content">
                    <div class="modal-body">
                        <div class="g-font-16">确定删除吗？</div>
                    </div>
                </div>
                <div class="g-modal-footer"><a class="g-modal-btn grey" href="javascript:;">取消</a><a class="g-modal-btn active" href="javascript:;">删除</a>
                </div>
            </div>
        </div>
        <audio src="" preload="metadata"></audio>
    </div>
</div>
{template 'loading'}
<script>
var mem_book_id = getCookie('mem_book');
function showDes(obj){
	if($('#des-info').hasClass('g-font-16')){
		$(obj).find('.switch').text('收起详情');		
		$('#des-info').removeClass('g-font-16').removeClass('g-text-cut');
	}
	else {
		$(obj).find('.switch').text('展开详情');	
		$('#des-info').addClass('g-font-16').addClass('g-text-cut');
	}
	
}
var isSubmit = false;
function goSub(){
	var content = $('#content-val').val();
	if(!content){
		msgTip('笔记内容不能为空')
		return false;
	}
	if(content.length>120){
		msgTip('笔记字数超过120个字！')
		return false;
	}
	isSubmit = true;
	$.ajax({
		 type:'POST',
		 data:{content: content, bid:mem_book_id,op:'sub'},
		 url:'{php echo $this->murl("notesubmit",["cid"=>$_GPC["cid"]])}',
		 success:function(dat){
			 isSubmit = false;
			 dat = JSON.parse(dat);
			 if(dat.code==1){
				 msgTip(dat.msg,function(){
					 location.href='{php echo $this->murl("notesucc")}&id='+dat.id
				 })
			 }
			 else{
				 msgTip(dat.msg)
			 }
		 }
	});
}
function getInfo(){
	$.ajax({
		url:'{php echo $this->murl("notesubmit",["cid"=>$_GPC["cid"]])}',
		data: {bid: mem_book_id},
		type: "post",
		success: function(dat){
			dat = JSON.parse(dat);
			if(dat.code==1){
				$('#book-des').text(dat.book.des)
			}
			else{
				msgTip(dat.msg,function(){
					 location.href='{php echo $this->murl("index")}'
				 })
			}
		}	
	});
}
$(function(){
	getInfo();
})
</script>

</body></html>